<template>
  <div class="w">
    <div class="header">
      <p :class="{linetobottom:Pflag,showp:true}" @click="toggleshow">发布炒股标</p>
      <p :class="{linetobottom:!Pflag,showp:true}" @click="toggledisplay">已结束</p>
      <p></p>
    </div>
    <el-row type="flex" :gutter="60" v-if="Pflag">
      <el-col :span="7">
        <el-input v-model="input">
          <template slot="prepend">发表资格</template>
          <template slot="append">次</template>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="input2">
          <template slot="prepend">奖励券</template>
          <template slot="append">个</template>
        </el-input>
      </el-col>
      <el-col :span="2" style="margin-left: 50px">
        <el-button type="primary" round>我要发标</el-button>
      </el-col>
    </el-row>
    <div class="header" v-if="Pflag">
      <p>已发布</p>
    </div>
    <el-table v-if="Pflag" :data="release" :fit="false" style="position: static">
      <el-table-column prop="num" label="理财标号" width="150"></el-table-column>
      <el-table-column prop="type" label="类型" width="120"></el-table-column>
      <el-table-column prop="time" label="时间"></el-table-column>
      <el-table-column prop="money" label="金额"></el-table-column>
      <el-table-column prop="percent" label="预期年化收益率" width="150"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="release">
          <el-link type="primary" :underline="false">{{release.row.status}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="release">
          <el-button>{{release.row.operate}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label>
        <template slot-scope="release">
          <el-button>{{release.row.change}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="header" v-if="Pflag">
      <p>已投标</p>
    </div>
    <el-table v-if="Pflag" :data="tender" :fit="false" style="position: static">
      <el-table-column label="成交标号" prop="num" width="150"></el-table-column>
      <el-table-column label="类型" prop="type" width="100"></el-table-column>
      <el-table-column label="时间" prop="time"></el-table-column>
      <el-table-column label="金额" prop="money"></el-table-column>
      <el-table-column label="预期年化收益率" prop="percent" width="150"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="tender">
          <el-link type="primary" :underline="false">{{tender.row.status}}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="header" v-if="Pflag">
      <p>已成标</p>
    </div>
    <div style="width: 900px;" v-if="Pflag">
      <el-table :data="chengBiao" :fit="false" style="position: static">
        <el-table-column label="成交标号" prop="num" width="150"></el-table-column>
        <el-table-column label="类型" prop="type" width="100"></el-table-column>
        <el-table-column label="时间" prop="time"></el-table-column>
        <el-table-column label="金额" prop="money"></el-table-column>
        <el-table-column label="总收益" prop="percent"></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="合同凭证" prop="contract" width="125"></el-table-column>
        <el-table-column label="对标人" prop="client" width="100"></el-table-column>
        <el-table-column label="专属客服" prop="service" width="100"></el-table-column>
      </el-table>

      <el-table :data="chengBiao2" :fit="false" style="width: 100%;">
        <el-table-column prop="header" label="每月结算" fixed width="120"></el-table-column>
        <el-table-column prop="january" label="第一月"></el-table-column>
        <el-table-column prop="february" label="第二月"></el-table-column>
        <el-table-column prop="march" label="第三月"></el-table-column>
        <el-table-column prop="april" label="第四月"></el-table-column>
        <el-table-column prop="may" label="第五月"></el-table-column>
        <el-table-column prop="june" label="第六月"></el-table-column>
        <el-table-column prop="july" label="第七月"></el-table-column>
        <el-table-column prop="august" label="第八月"></el-table-column>
        <el-table-column prop="september" label="第九月"></el-table-column>
        <el-table-column prop="october" label="第十月"></el-table-column>
        <el-table-column prop="november" label="第十一月"></el-table-column>
        <el-table-column prop="december" label="第十二月"></el-table-column>
      </el-table>
    </div>
    <div class="header" v-if="!Pflag">
      <p>已结束</p>
    </div>
    <el-table v-if="!Pflag" :data="end" :fit="false" style="position: static">
      <el-table-column label="成交标号" prop="num" width="150"></el-table-column>
      <el-table-column label="类型" prop="type" width="100"></el-table-column>
      <el-table-column label="时间" prop="time"></el-table-column>
      <el-table-column label="金额" prop="money"></el-table-column>
      <el-table-column label="总收益" prop="percent" width="150"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="end">
          <el-link type="primary" :underline="false">{{end.row.status}}</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      release: [
        {
          num: "201909061600001",
          type: "保本保收益",
          time: "6个月",
          money: "200万",
          percent: "10%",
          status: "发布中",
          operate: "结束上架",
          change: "修改"
        },
        {
          num: "201909061600002",
          type: "保本保收益",
          time: "12个月",
          money: "100万",
          percent: "11%+1%",
          status: "发布中",
          operate: "结束上架",
          change: "修改"
        }
      ],
      tender: [
        {
          num: "201909061600001",
          type: "保本保收益",
          time: "6个月",
          money: "200万",
          percent: "10%",
          status: "待审核"
        },
        {
          num: "201909061600002",
          type: "保本保收益",
          time: "12个月",
          money: "100万",
          percent: "11%",
          status: "待审核"
        }
      ],
      chengBiao: [
        {
          num: "201909061600011",
          type: "保本保收益",
          time: "12个月",
          money: "200万",
          percent: "11%+1%",
          status: "已成标",
          contract: "上传合同pdf文件",
          client: "显示对标人身份文件",
          service: "jssz90901"
        }
      ],
      chengBiao2: [
        {
          header: "数额",
          january: "5866元",
          february: "5866元",
          march: "5866元",
          april: "5866元",
          may: "5866元",
          june: "5866元",
          july: "5866元",
          august: "5866元",
          september: "5866元",
          october: "5866元",
          november: "5866元",
          december: "5866元"
        },
        {
          header: "支付凭证",
          january: "转账截图",
          february: "待支付",
          march: "待支付",
          april: "待支付",
          may: "待支付",
          june: "待支付",
          july: "待支付",
          august: "待支付",
          september: "待支付",
          october: "待支付",
          november: "待支付",
          december: "待支付"
        },
        {
          header: "其他支付凭证",
          january: "",
          february: "",
          march: "",
          april: "",
          may: "",
          june: "",
          july: "",
          august: "",
          september: "",
          october: "",
          november: "",
          december: ""
        }
      ],
      end: [
        {
          num: "201909061600001",
          type: "保本保收益",
          time: "6个月",
          money: "500万",
          percent: "300000元",
          status: "已结束"
        },
        {
          num: "201909061600002",
          type: "保本保收益",
          time: "12个月",
          money: "100万",
          percent: "100000元",
          status: "已结束"
        }
      ],
      input2: 2,
      Pflag: true,
      input: 0
    };
  },
  methods: {
    toggledisplay() {
      this.Pflag = false;
    },
    toggleshow() {
      this.Pflag = true;
    }
  }
};
</script>

<style scoped>
</style>
